import 'package:extended_tabs/extended_tabs.dart';
import 'package:flutter/material.dart';

class EGExtendedTabs extends StatefulWidget {
  @override
  _EGExtendedTabsState createState() => _EGExtendedTabsState();
}

class _EGExtendedTabsState extends State<EGExtendedTabs>
    with SingleTickerProviderStateMixin {
  // AnimationController _controller;
  TabController _controller;
  TextDirection _textDirection = TextDirection.ltr;
  MainAxisAlignment _mainAxisAlignment = MainAxisAlignment.spaceBetween;
  TabBarIndicatorSize _tabBarIndicatorSize = TabBarIndicatorSize.label;

  @override
  void initState() {
    super.initState();
    // _controller = AnimationController(vsync: this);
    _controller = TabController(length: 5, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('EGExtendedTabs轮子'),
        ),
        body: normal());
  }

  Widget normal() {
    return Column(
      children: [
       
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child: ExtendedTabBar(
            tabs: List<Widget>.generate(
                _controller.length,
                (int index) => Tab(
                      text: 'Tab$index',
                    )).toList(),
            controller: _controller,
            labelPadding: EdgeInsets.zero,
            labelColor: Colors.blue,
            isScrollable: _controller.length > 5,
            indicatorSize: _tabBarIndicatorSize,
            mainAxisAlignment: _mainAxisAlignment,
            indicator: const ExtendedUnderlineTabIndicator(
                //size: 31,
                borderSide: BorderSide(
              color: Colors.red,
              width: 1,
            )),
          ),
        ),
        Expanded(
          child: TabBarView(
              controller: _controller,
              children: List<Widget>.generate(
                  _controller.length,
                  (int index) => Container(
                        decoration: BoxDecoration(
                            border: Border.all(color: Colors.red)),
                        margin: const EdgeInsets.all(
                          15,
                        ),
                        alignment: Alignment.center,
                        child: Text('I\'m tab $index'),
                      )).toList()),
        )
      ],
    );
  }

  Widget demo() {
    return Directionality(
      textDirection: _textDirection,
      child: Column(
        children: <Widget>[
          DropdownButton<TextDirection>(
            items: TextDirection.values
                .map((TextDirection textDirection) =>
                    DropdownMenuItem<TextDirection>(
                      child: Text(textDirection.toString()),
                      value: textDirection,
                    ))
                .toList(),
            value: _textDirection,
            onChanged: (TextDirection textDirection) {
              setState(() {
                _textDirection = textDirection;
              });
            },
          ),
          DropdownButton<MainAxisAlignment>(
            items: MainAxisAlignment.values
                .map((MainAxisAlignment mainAxisAlignment) =>
                    DropdownMenuItem<MainAxisAlignment>(
                      child: Text(mainAxisAlignment.toString()),
                      value: mainAxisAlignment,
                    ))
                .toList(),
            value: _mainAxisAlignment,
            onChanged: (MainAxisAlignment mainAxisAlignment) {
              setState(() {
                _mainAxisAlignment = mainAxisAlignment;
              });
            },
          ),
          DropdownButton<TabBarIndicatorSize>(
            items: TabBarIndicatorSize.values
                .map((TabBarIndicatorSize tabBarIndicatorSize) =>
                    DropdownMenuItem<TabBarIndicatorSize>(
                      child: Text(tabBarIndicatorSize.toString()),
                      value: tabBarIndicatorSize,
                    ))
                .toList(),
            value: _tabBarIndicatorSize,
            onChanged: (TabBarIndicatorSize tabBarIndicatorSize) {
              setState(() {
                _tabBarIndicatorSize = tabBarIndicatorSize;
              });
            },
          ),
          // DropdownButton<int>(
          //   items: const <DropdownMenuItem<int>>[
          //     DropdownMenuItem<int>(
          //       child: Text('5 tabs'),
          //       value: 5,
          //     ),
          //     DropdownMenuItem<int>(
          //       child: Text('15 tabs'),
          //       value: 15,
          //     ),
          //   ],
          //   value: _controller.length,
          //   onChanged: (int? count) {
          //     setState(() {
          //       _controller.dispose();
          //       _controller = TabController(length: count!, vsync: this);
          //     });
          //   },
          // ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15),
            child: ExtendedTabBar(
              tabs: List<Widget>.generate(
                  _controller.length,
                  (int index) => Tab(
                        text: 'Tab$index',
                      )).toList(),
              controller: _controller,
              labelPadding: EdgeInsets.zero,
              labelColor: Colors.blue,
              isScrollable: _controller.length > 5,
              indicatorSize: _tabBarIndicatorSize,
              mainAxisAlignment: _mainAxisAlignment,
              indicator: const ExtendedUnderlineTabIndicator(
                  //size: 31,
                  borderSide: BorderSide(
                color: Colors.red,
                width: 1,
              )),
            ),
          ),
          Expanded(
            child: TabBarView(
                controller: _controller,
                children: List<Widget>.generate(
                    _controller.length,
                    (int index) => Container(
                          decoration: BoxDecoration(
                              border: Border.all(color: Colors.red)),
                          margin: const EdgeInsets.all(
                            15,
                          ),
                          alignment: Alignment.center,
                          child: Text('I\'m tab $index'),
                        )).toList()),
          )
        ],
      ),
    );
  }

  Widget defaultTabController() {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('EGExtendedTabs轮子'),
          bottom: TabBar(
            indicator: ColorTabIndicator(Colors.red),
            labelColor: Colors.black,
            indicatorColor: Colors.orange,
            tabs: [
              Tab(text: "Tab0"),
              Tab(text: "Tab1"),
              Tab(text: "Tab3"),
            ],
            controller: _controller,
          ),
        ),
        body: TabBarView(
          controller: _controller,
          children: <Widget>[
            Icon(
              Icons.local_bar,
              size: 128.0,
              color: Colors.black12,
            ),
            Icon(
              Icons.local_cafe,
              size: 128.0,
              color: Colors.black12,
            ),
            Icon(
              Icons.local_offer,
              size: 128.0,
              color: Colors.black12,
            ),
          ],
        ),
      ),
    );
  }
}
